<template>
    <div>
      <el-row>
        <el-col :span="3"> 
          <el-input v-model="color" placeholder="请输入颜色名称"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button @click="clolr_click"  class="add_btn"  icon="el-icon-search"> 搜索</el-button>
          <el-button @click="add_color" v-permission="'system:users:add'" icon="el-icon-plus" class="add_btn">新增颜色</el-button>
        </el-col>
      </el-row>
      <el-table :data="dataList" stripe style="width: 100%" border>
        <el-table-column prop="color" label="颜色"> </el-table-column>
        <el-table-column prop="created_at" label="创建日期"> </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click="set_product(scope.row)"
              type="text"
              icon="el-icon-edit"
              >编辑</el-button
            >
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              title="是否删除这条数据？"
              @confirm="del_product(scope.row)"
            >
              <el-button slot="reference" type="text" icon="el-icon-delete">
                删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
  
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          @prev-click="prev"
          @next-click="next"
          :current-page.sync="pagination.page"
          :page-size="pagination.per_page"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
  
      <el-dialog
        :title="title"
        :visible.sync="isProduct"
        width="30%"
        :close-on-click-modal="false"
        @close="close_dialog"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="颜色" prop="color">
            <el-input v-model="ruleForm.color"  placeholder="请输入颜色名称或者以英文, 号隔开"></el-input>    
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isProduct = false">取 消</el-button>
          <el-button type="primary" @click="submitadd('ruleForm')"
            >确定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { getManagementCardList, createColor, delColor } from "@/api/product/index";
  export default {
    data() {
      return {
        color:'',
        title: "",
        isProduct: false,
        dataList: [],
        ruleForm: {
          color: "",
          id: "",
        },
        rules: {
          color: [
            {
              required: true,
              message: "请输入颜色或以英文, 号隔开",
              trigger: "blur",
            },
          ],
        },
        pagination: {
          per_page: 10,
          page: 1,
        },
        total: 0,
      };
    },
    mounted() {
      this.getlist();
    },
    methods: {
      close_dialog(){
        this.ruleForm={
          color: "",
          id: "",
        }
      },
      del_product(row) {
        console.log("ww");
        delColor({
          id: row.id,
          is_del: 1,
        }).then((res) => {
          if (res.code == 200) {
            this.isProduct = false;
            this.$message.success("提交成功");
            this.getlist();
          }
        });
      },
      getlist() {
        getManagementCardList(this.pagination).then((res) => {
          if (res.code == 200) {
            this.dataList = res.data.data;
            this.total = res.data.total;
          }
        });
      },
      set_product(row) {
        this.ruleForm.color = row.color;
        this.ruleForm.id = row.id;
        this.title = "颜色编辑";
        this.isProduct = true;
      },
      add_color() {
        this.title = "新增颜色";
        this.isProduct = true;
        this.$nextTick(function () {
          this.$refs.ruleForm.resetFields();
        });
      },
      submitadd(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            createColor(this.ruleForm).then((res) => {
              if (res.code == 200) {
                this.isProduct = false;
                this.$message.success("提交成功");
                this.getlist();
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      handleSizeChange(val) {
        console.log(val);
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pagination.page = val;
        this.getlist();
      },
      prev() {
        this.pagination.page = this.pagination.page - 1;
        this.getlist();
      },
      next() {
        console.log("ss");
        this.pagination.page = this.pagination.page + 1;
        this.getlist();
      },
      clolr_click(){
        getColorList({color:this.color}).then((res) => {
          if (res.code == 200) {
            this.dataList = res.data.data;
            this.total = res.data.total;
          }
        });
      }
    },
  };
  </script>
  
  <style></style>
  